<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>설정</title>
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	#topmenu li a:hover,
    	#topmenu li a:focus{
    		background-color:#F6F7F8;
    	}
    	#topmenu .active a,
    	#topmenu .active a:hover,
    	#topmenu .active a:focus{
    		background-color:#F6F7F8;
    	}
    	
    	#topmenu li a{
    		text-decoration:none;
    		text-align:left;
    		display: block;
    		padding: 14px 0 14px 10px;
    		border-bottom: 1px #DBDBDB solid;
    	}
    	#topmenu li:last-child a{
    		border-bottom: 0;
    	}
    	   	
    	#topmenu li.active,
    	#topmenu li.active a,
    	#topmenu li.active a *{
    		background-color:#F6F7F8;
    	}
    	
    	#mobile_menu_list li{
    		cursor: pointer;
    		width: 100%;
    		height: 50px;
    		margin-top: 5px;
    		background-color: #F5F5F5;
			border: 1px solid #ddd;
			border-radius: 4px;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
			font-family: 'Nanum Gothic Coding', monospace;
			font-size: 1.3em;
    	}
    	#mobile_menu_list li p{
    		padding-top: 15px;
			padding-left: 10px;
			padding-right: 10px;
    	}
    	.subLayout{
    		border-radius: 3px;
    		border-bottom-color: #D0D1D5!important;
    		border:1px #DFE0E4 solid;
    		width:100%;
    		padding:15px;
    		background-color: #fff;
    		display: none;
    		overflow:hidden;
    	}
    	.tabMenu{
    		margin:0;
    		padding-bottom: 0!important;
    		display: block;
    		width: 100%;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    		overflow:hidden;
    	}
    	.profileImageUpload{
    		position: absolute;
    		top: 0;
    		right: 0;
    		margin: 0;
    		opacity: 0;
    		-ms-filter: 'alpha(opacity=0)';
    		direction: ltr;
			cursor: pointer;
			font-size: 200px;
    	}
    	#movie-upLoadProfileImage{
			position: absolute;
			top: 0;
			cursor: move;
			z-index: 5;
			border-radius:4px;
		}
		
		@media screen and (max-width: 991px){ .tabMenu{margin-bottom:20px;} }
    </style>
  </head>

  <body>
  	<div id="viewport">
	<div id="page">
    <!-- Fixed navbar -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- Fixed navbar -->
	<br>
   	<div class="container" style="margin-bottom: 25px;">
   		<div class="row">
   		
   		<div class="col-md-3">
   			<div class="tabMenu">
   			<ul class="list-unstyled" id="topmenu" style="padding:0;margin:0;">
   				<li><a href="#account" title="계정"><i class="glyphicon glyphicon-user"></i>&nbsp;계정</a></li>
   				<c:if test="${userDto.loginApp  eq 'default'}">
   					<li><a href="#password" title="비밀번호"><i class="glyphicon glyphicon-lock" style="color:#FDBD3B"></i>&nbsp;비밀번호</a></li>
   				</c:if>
   				<li><a href="#profile" title="프로필"><i class="fa fa-edit"></i>&nbsp;프로필</a></li>
   				<li><a href="#privacy" title="공개 범위"><i class="fa fa-check-square" style="color:#FDBD3B"></i>&nbsp;공개 범위</a></li>
   				<li><a href="#notifications" title="알림"><i class="fa fa-bell" style="color:#FF8000"></i>&nbsp;알림</a></li>
   				<li><a href="#memberLeave" title="회원탈퇴"><i class="glyphicon glyphicon-minus-sign" style="color:#BF0000;"></i>&nbsp;회원탈퇴</a></li>
   			</ul>
   			</div>
   		</div>
   		
   		<div class="col-md-7" style="margin:0;">
   			
   			<!-- 계정 -->
   			<div id="account" class="subLayout">
   				<h4>계정</h4>
    			<form class="form-horizontal" role="form" id="account-form">
    				<div class="form-group">
    					<div class="col-lg-offset-2 col-lg-6" style="margin-bottom: 8px;"><span id="showCheckId"></span></div>
    					<div class="clearfix"></div>
						<label for="account_id" class="col-lg-2 control-label">아이디</label>
						<div class="col-lg-6">
							<input type="text" class="form-control" id="account_id" name="account_id" value="${userDto.id}" maxlength="20" onkeyup="checkId(this.value)">
							<span class="help-block">http://faeple.com/${userDto.id}</span>
						</div>
					</div>
					
    				<div class="form-group">
						<label for="account_email" class="col-lg-2 control-label">이메일</label>
						<div class="col-lg-6">
							<input type="email" class="form-control" id="account_email" name="account_email" value="${userDto.email}" onkeyup="emailCheck(this.value)" placeholder="이메일 주소를 입력해주세요">
							<span class="help-block">사용중인 이메일로 설정해주세요</span>
						</div>
					</div>
					
					<div class="form-group">
						<label for="account_country" class="col-lg-2 control-label">국가</label>
						<div class="col-lg-6">
							<select class="form-control" id="account_country" name="account_country" onchange="$('#accountBtn').removeAttr('disabled')">
								<option value="대한민국">대한민국</option>
								<option value="미국">미국</option>
								<option value="중국">중국</option>
								<option value="일본">일본</option>
							</select>
							<span class="help-block">거주중인 국가를 선택해주세요</span>
						</div>
					</div>
					<hr style="margin-top:8px;">
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-6"><button type="button" class="btn btn-primary" onclick="modify(document.getElementById('account-form'), this, 'account')" disabled="disabled" id="accountBtn">저장하기</button></div>
					</div>
					<hr style="margin-top:8px;">
					<div class="form-group">
						<div class="col-lg-12"><h4>SNS 연결</h4></div>
						<div class="col-lg-offset-2 col-lg-10">
							<button type="button" class="btn btn-facebook" title="이 서비스는 준비중입니다" data-toggle="tooltip" style="position: relative; width: 170px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-facebook fa-lg"></i></span>페이스북 연결</button>
			        		<span class="help-block">글쓰기를 할때 페이스북 피드에 게시합니다</span>
			        		<button type="button" class="btn btn-twitter" title="이 서비스는 준비중입니다" data-toggle="tooltip" style="position: relative; width: 170px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-twitter fa-lg"></i></span>트위터 연결</button>
			        		<span class="help-block">글쓰기를 할때 트위터에 트윗을 게시합니다</span>
						</div>
					</div>
    			
    			<hr style="margin-top:8px;">
    			
    			<div class="form-group">
    				<div class="col-lg-12"><h4>계정정보</h4></div>
	    			<div class="col-lg-offset-2 col-lg-10">
		    			<p>가입한 날짜 : ${fn:substring(userDto.joindate,0,10)}</p>
						<p>마지막으로 접속한 날짜 : ${fn:substring(userDto.last_access,0,16)}</p>
						<p>접속횟수 : ${userDto.access_count+1}</p>
					</div>
				</div>
				</form>
    		</div>
   			
   			<c:if test="${userDto.loginApp  eq 'default'}">
   			<!-- 비밀번호 -->
   			<div id="password" class="subLayout">
    			<h4>비밀번호</h4>
    			<hr style="margin-top:8px;">
    				<form class="form-horizontal" id="passwd-form" role="form">
	    				<div class="form-group">
							<label for="passwd_currently" class="col-lg-3 control-label">현재 비밀번호</label>
							<div class="col-lg-6">
								<input type="password" class="form-control" id="passwd_currently" name="passwd_currently" placeholder="현재 비밀번호">
							</div>
						</div>
						
	    				<div class="form-group">
							<label for="passwd_new" class="col-lg-3 control-label">새 비밀번호</label>
							<div class="col-lg-6">
								<input type="password" class="form-control" id="passwd_new" name="passwd_new" placeholder="새 비밀번호">
							</div>
						</div>
						
						<div class="form-group">
							<label for="passwd_check" class="col-lg-3 control-label">비밀번호 확인</label>
							<div class="col-lg-6">
								<input type="password" class="form-control" id="passwd_check" name="passwd_check" onblur="passwdCheck(this.value)" placeholder="비밀번호 확인">
							</div>
						</div>
						<hr style="margin-top:8px;">
						<div class="form-group">
							<div class="col-lg-offset-3 col-lg-6"><button type="button" class="btn btn-primary" disabled="disabled" onclick="modify(document.getElementById('passwd-form'), this, 'passwd')" id="passwdBtn">저장하기</button></div>
						</div>
    				</form>
    		</div>
   			</c:if>
   			
   			<!-- 프로필 -->
   			<div id="profile" class="subLayout">
    			<h4>프로필</h4>
    			<hr style="margin-top:8px;">
    			<form action="/modifyAccounts" class="form-horizontal" id="profile-form" method="post" role="form" enctype="multipart/form-data">
    				<input type="hidden" id="type" name="type" value="profile">
    				<div class="form-group">
						<label for="profile_name" class="col-lg-2 control-label">이름</label>
						<div class="col-lg-6">
							<input type="text" class="form-control" id="profile_name" name="profile_name" value="${userDto.name}">
							<span class="help-block">실명이나 별명을 입력해주세요</span>
						</div>
					</div>
					
					<div class="form-group" style="margin-bottom:25px;">
						<label for="profile_gender" class="col-lg-2 control-label">성별</label>
						<div class="col-lg-6">
							<label class="checkbox-inline" style="padding-left:0;">
								<input type="radio" id="profile_gender" name="profile_gender" value="male"> 남성
							</label>
							<label class="checkbox-inline" style="padding-left:0;">
								<input type="radio" id="profile_gender" name="profile_gender" value="female"> 여성
							</label>
						</div>
					</div>
					
					<div class="form-group" style="margin-bottom:25px;">
						<label for="profile_age" class="col-lg-2 control-label">연령대</label>
						<div class="col-lg-3">
							<select class="form-control" id="profile_age1" name="profile_age1">
								<option value="0">연령대</option>
								<option value="1">10대</option>
								<option value="2">20대</option>
								<option value="3">30대</option>
								<option value="4">40대</option>
							</select>
						</div>
						<div class="col-lg-3">
							<select class="form-control" id="profile_age2" name="profile_age2">
								<option value="0">초반</option>
								<option value="1">중반</option>
								<option value="2">후반</option>
							</select>
						</div>
						<input type="hidden" id="profile_age" name="profile_age" value="${userDto.age}">
					</div>
					
    				<div class="form-group">
						<label for="profile_location" class="col-lg-2 control-label">위치</label>
						<div class="col-lg-6">
							<input type="text" class="form-control" id="profile_location" name="profile_location" value="${userDto.location}" placeholder="지역 입력">
							<span class="help-block">살고있는 지역을 입력해주세요</span>
						</div>
					</div>
					
					<div class="form-group">
						<label for="profile_website" class="col-lg-2 control-label">웹사이트</label>
						<div class="col-lg-6">
							<input type="text" title="http://를 포함한 주소를 입력해주세요" data-toggle="tooltip" class="form-control" id="profile_website" name="profile_website" value="${userDto.website}" placeholder="http://">
							<span class="help-block">홈페이지나 블로그 주소를 입력해주세요</span>
						</div>
					</div>
					
					<div class="form-group">
						<label for="profile_description" class="col-lg-2 control-label">자기소개</label>
						<div class="col-lg-6">
							<textarea rows="4" class="form-control" id="profile_description" maxlength="120" style="resize:vertical;" name="profile_description" placeholder="자기소개를 입력해 주세요">${userDto.description}</textarea>
							<span class="help-block">120자 이내로 자신을 소개해주세요</span>
						</div>
					</div>
					<hr style="margin-top:8px;">
					
					<div class="form-group">
						<label for="profile_image" class="col-lg-2 control-label">사진</label>
						<div class="col-lg-6">
							<div style="border:6px solid #fff;width:180px;height:180px;border-radius:11px;box-shadow: 1px 0px 3px rgba(0,0,0,0.2);position: relative;overflow: hidden;">
								<div style="width:100%; height:100%; position: relative;overflow: hidden;">
									<img src="/resources/upload/profile/thumbnail/${userDto.profileImage}" style="width:100%; height:100%; border-radius:4px;" id="profile_image_viewer">
									<input type="file" onchange="profileImageUpload(this)" id="profile_image" name="profile_image" accept="image/*" class="profileImageUpload" >
									<input type="hidden" id="profile_imageTop" name="profile_imageTop" value="0">
									<img style="width: 180px; height: auto;" id="movie-upLoadProfileImage" src="">
								</div>
							</div>
							<c:if test="${userDto.loginApp eq 'fb'}">
								<input type="hidden" id="fb_profileImage" name="fb_profileImage" value="none">
								<button type="button" class="btn btn-facebook" onclick="getFbProfileImg()" title="페이스북 사진 가져오기" style="position: relative; width: 190px; margin-top:10px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-facebook fa-lg"></i></span>&nbsp;사진가져오기</button>
							</c:if>
						</div>
					</div>
					<hr style="margin-top:8px;">
					<div class="form-group">
						<label for="" class="col-lg-2 control-label">SNS 링크 <i class="fa fa-question-circle" style="font-size: 15px; color:#a8a8a8;" title="프로필 페이지에 SNS링크를 추가합니다" data-toggle="tooltip"></i></label>
						<div class="col-lg-6">
							<div class="input-group" style="margin-bottom: 10px;">
								<span class="input-group-addon"><img src="/resources/img/icon/share-facebook-icon.png" width="18" height="18"></span>
								<input type="text" class="form-control" id="profile_link_facebook" name="profile_link_facebook" placeholder="페이스북 아이디" maxlength="20" value="${userDto.link_facebook}">
							</div>
							<div class="input-group" style="margin-bottom: 10px;">
								<span class="input-group-addon"><img src="/resources/img/instagram-icon.png" width="18" height="18"></span>
								<input type="text" class="form-control" id="profile_link_instagram" name="profile_link_instagram" placeholder="인스타그램 아이디" maxlength="20" value="${userDto.link_instagram}">
							</div>
							<div class="input-group" style="margin-bottom: 10px;">
								<span class="input-group-addon"><img src="/resources/img/icon/share-twitter-icon.png" width="18" height="18"></span>
								<input type="text" class="form-control" id="profile_link_twitter" name="profile_link_twitter" placeholder="트위터 아이디" maxlength="20" value="${userDto.link_twitter}">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-6"><button type="button" class="btn btn-primary" disabled="disabled" onclick="profileSave()" id="profileBtn">저장하기</button></div>
					</div>
    			</form>
    		</div>
    		
   			<!-- 공개 범위 -->
   			<div id="privacy" class="subLayout">
   				<h4>공개범위</h4>
    			<hr style="margin-top:8px;">
    			<form class="form-horizontal" id="privacy-form" role="form">
    				<div class="form-group">
						<label class="col-lg-4 control-label">나를 팔로우하는 사람</label>
						<div class="col-lg-6">
							<div class="radio">
								<label title="누구나 회원님을 팔로우 할 수 있습니다" data-toggle="tooltip">
									<input type="radio" name="privacy_follow" id="privacy_follow" value="2">
									누구나
								</label>
							</div>
							<div class="radio">
								<label title="팔로우 신청을 받지 않습니다" data-toggle="tooltip">
									<input type="radio" name="privacy_follow" id="privacy_follow" value="0">
									받지않음
								</label>
							</div>
						</div>
					</div>
					
    				<div class="form-group">
						<label class="col-lg-4 control-label">내 프로필을 볼 수 있는사람</label>
						<div class="col-lg-6">
							<div class="radio">
								<label title="누구나 회원님의 프로필페이지에 접근할 수 있습니다" data-toggle="tooltip">
									<input type="radio" name="privacy_profile" id="privacy_profile" value="2" checked>
									누구나
								</label>
							</div>
							<div class="radio">
								<label title="회원님의 팔로워만 회원님의 프로필페이지에 접근할 수 있습니다" data-toggle="tooltip">
									<input type="radio" name="privacy_profile" id="privacy_profile" value="1">
									팔로워만
								</label>
							</div>
							<div class="radio">
								<label title="아무도 회원님의 프로필페이지에 접근할 수 없습니다" data-toggle="tooltip">
									<input type="radio" name="privacy_profile" id="privacy_profile" value="0">
									모두 비공개
								</label>
							</div>
						</div>
					</div>
					
					<hr style="margin-top:8px;">
					<div class="form-group">
						<div class="col-lg-offset-4 col-lg-6"><button type="button" class="btn btn-primary" disabled="disabled" onclick="modify(document.getElementById('privacy-form'), this, 'privacy')" id="privacyBtn">저장하기</button></div>
					</div>
    			</form>
   			</div>
   			<!-- 공개 범위 -->
   			
   			<!-- 알림 -->
   			<div id="notifications" class="subLayout">
   				<h4>알림</h4>
    			<hr style="margin-top:8px;">
    			<form class="form-horizontal" id="noti-form" role="form">
    				<div class="form-group">
						<label class="col-lg-3 control-label">받을 알림 선택</label>
						<div class="col-lg-6">
							<div class="checkbox">
								<label>
									<input type="checkbox" class="notiCheck" value="1" id="noti_follow" name="noti_follow">
									누군가가 나를 팔로우할때
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" class="notiCheck" value="1" id="noti_refer" name="noti_refer">
									누군가가 나를 언급했을때
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" class="notiCheck" value="1" id="noti_like" name="noti_like">
									내 게시물에 좋아요 눌렀을때
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" class="notiCheck" value="1" id="noti_comment" name="noti_comment">
									내 게시물에 댓글을 달았을때
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" class="notiCheck" value="1" id="noti_reply" name="noti_reply">
									내 댓글에 답변을 달아줬을때
								</label>
							</div>
							<div class="checkbox">
								<label>
									<input type="checkbox" id="noti_all" value="">
									모든알림 받지않음
								</label>
							</div>
						</div>
					</div>
					
					<hr style="margin-top:8px;">
					<div class="form-group">
						<div class="col-lg-offset-3 col-lg-6"><button type="button" class="btn btn-primary" disabled="disabled" onclick="modify(document.getElementById('noti-form'), this, 'notifications')" id="setting_notiBtn">저장하기</button></div>
					</div>
    			</form>
   			</div>
   			<!-- 알림 -->
   			
   			<!-- 회원탈퇴 -->
   			<div id="memberLeave" class="subLayout">
   				<h4>회원탈퇴</h4>
   				<hr style="margin-top:8px;">
   				<p>Faeple에서 회원님의 계정을 영구히 삭제합니다</p>
   				<abbr title="Faeple에서 회원님의 데이터가 영구히 삭제되는 항목" class="text-warning">삭제되는 항목 :</abbr>
   				<ul style="margin-top:10px; padding-left:30px;">
   					<li>회원님의 이름</li>
   					<li>회원님의 이메일</li>
   					<li>모든 개인정보가 삭제됩니다</li>
   				</ul>
   				<br>
   				<abbr title="Faeple에서 회원님의 데이터가 보관되는 항목" class="text-warning">삭제되지 않는 항목 :</abbr>
   				<ul style="margin-top:10px; padding-left:30px;">
   					<li>로그 기록</li>
   				</ul>
   				<br>
   				<p class="text-danger"><strong>회원탈퇴시 계정은 영구히 삭제되며, 복구할 수 없습니다.</strong></p>
   				<hr style="margin-top:8px;">
   				<button type="button" data-toggle="modal" data-target="#memberLeave-modal" class="btn btn-danger" title="탈퇴하기"><i class="glyphicon glyphicon-remove"></i> 탈퇴하기</button>
   			</div>
   			<!-- 회원탈퇴 -->
   		</div> <!-- end sub -->
   	</div> <!-- end row -->
</div> <!-- end container -->

<!-- 회원탈퇴 -->
<div class="modal fade" id="memberLeave-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form action="/memberLeave" method="post">
				<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4 class="modal-title">회원탈퇴</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="leave-type">탈퇴하는 이유가 무엇인가요?</label>
						<select class="selectpicker show-tick" id="leave-type" name="leave-type" title="선택" data-width="100%">
							<option value="서비스 불만족">서비스 불만족</option>
							<option value="기능 부족">기능 부족</option>
							<option value="사용하기 어려움">사용하기 어려움</option>
							<option value="더이상 사용하지 않음">더이상 사용하지 않음</option>
							<option value="기타">기타</option>
						</select> 
					</div>
					<div class="form-group">
						<label for="leave-opinion">추가의견</label>
						<textarea id="leave-opinion" name="leave-opinion" class="form-control" rows="3" cols="250" style="resize:none;" maxlength="500"></textarea>
					</div>
				</div>
				<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
					<button type="submit" class="btn btn-primary btn-lg btn-block">탈퇴하기</button>
				</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- reports dialog -->

</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript">
    function profileImageUpload(input){
  		var fileList = input.files;
  		try{
      		var anyWindow = window.URL || window.webkitURL;
      		var objectUrl = anyWindow.createObjectURL(fileList[0]);
      		$("#movie-upLoadProfileImage").attr("src", objectUrl).show()
    		.load(function(){
    			if($(this).height() < 180){
    				$(this).css("height", 180);
    			}
    		});
      		//window.URL.revokeObjectURL(fileList[0]);
      		$("#profileBtn").removeAttr("disabled");
      		$("#displayProfileImage").attr("src", objectUrl);
      		$("#profile_image_viewer").attr("src", objectUrl);
  		}catch(e){
  			alertShow("danger", "현재 이용중인 인터넷브라우저로는 이미지를 업로드 할 수 없습니다.&nbsp;<a style='color:#401A19;' href='/help?'>자세히 알아보기</a>", null);
  		}
  	}
   	
   	// 숫자만 입력 가능하도록
	function onlyNumber(event) {
	    var key = window.event ? event.keyCode : event.which;    
	    if ((event.shiftKey == false) && ((key  > 47 && key  < 58) || (key  > 95 && key  < 106)
	    || key  == 35 || key  == 36 || key  == 37 || key  == 39  // 방향키 좌우,home,end  
	    || key  == 8  || key  == 46 )
	    ) {
	        return true;
	    }else {
	        return false;
	    }    
	};
   	
   	function memberLeave(){
   		if(confirm('정말로 탈퇴 하시겠습니까?')){
   			$.ajax({
			    type : "get"
			    , url : "/memberLeave"
			    , dataType : "text"
			    , timeout : 5000
			    , error : function() {
			    	alertShow("danger","다시 시도해 주세요", 2000);
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		location.href="/logout";
			    	}else{
			    		alertShow("danger","다시 시도해 주세요", 2000);
			    	}
			    }
			});
   		}
   	}
   	
   	function checkId(id){
		if(id.length < 4){
			$("#showCheckId").html("아이디를 4글자 이상으로 해주세요");
			$("#accountBtn").attr("disabled","disabled");
		}else{
			var errorCss = "<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>";
			var successCss = "<span style='color:#435743;'><i class='glyphicon glyphicon-ok'></i>";
			var data = "id="+id;
			if(id != "${userDto.id}"){
				$.ajax({
				    type : "get"
				    , url : "/checkId"
				    , data : data
				    , dataType : "text"
				    , timeout : 5000
				    , error : function(request, status, error) {
				    	
				    }
				    , success : function(response) {
				    	if(response == "true"){
				    		$("#showCheckId").html("<span style='color:#435743;'><i class='glyphicon glyphicon-ok'></i>&nbsp;사용가능합니다</span>");
				    		$("#accountBtn").removeAttr("disabled","disabled");
				    	}else{
				    		$("#showCheckId").html("<span style='color:#BF0000;'><i class='glyphicon glyphicon-remove'></i>&nbsp;사용중인 아이디입니다</span>");
				    		$("#accountBtn").attr("disabled","disabled");
				    	}
				    }
				    , beforeSend: function() {
				    	$("#showCheckId").html("<img src='/resources/img/ajax-loader3.gif'>");
				    }
				});
			}else{
				$("#showCheckId").html("");
			}
		}
	}
   	
   	function passwdCheck(value){
   		if($("#passwd_new").val() != value){
   			$("#passwdBtn").attr("disabled","disabled");
   			alert("비밀번호를 확인해 주세요");
   		}else{
   			$("#passwdBtn").removeAttr("disabled","disabled");
   		}
   	}
   	
   	function emailCheck(email){
   		eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
   		if(eCheck.test(email)){
   			$("#accountBtn").removeAttr("disabled","disabled");
   			$("#account_email").next().empty();
   		}else{
   			$("#accountBtn").attr("disabled","disabled");
   			$("#account_email").next().html("올바른 이메일을 입력해주세요");
   		}
   	}
   	
   	function modify(form,obj, type){
   		
   		var data = $(form).serialize()+"&type="+type;
   		$.ajax({
		    type : "post"
		    , url : "/modifyAccounts"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alertShow("danger", "다시 시도해 주세요", 2000);
		    }
		    , success : function(response) {
		    	if(response == "execute"){
		    		alertShow("success", "변경되었습니다", 2000);
		    		$(obj).attr("disabled", "disabled").html("저장하기");
		    	}else if(response == "passwd"){
		    		alertShow("danger", "현재 비밀번호가 일치하지 않습니다", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장하기");
		    	}else{
		    		alertShow("danger", "다시 시도해 주세요", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장하기");
		    	}
		    	$("#settingUserId").attr("href", "/"+$("#account_id").val());
		    }
		    , beforeSend: function() {
		    	$(obj).attr("disabled", "disabled").html("변경중...");
		    }
		});
   	}
   	
   	$(function(){
   		var setMenu = location.href.split("#")[1];
   		if(setMenu == "account"){
   			$("#account").fadeIn(500);
   			$("#topmenu > li:nth-child(1)").addClass("active");
   		}else if(setMenu == "password"){
   			$("#password").fadeIn(500);
   			$("#topmenu > li:nth-child(2)").addClass("active");
   		}else if(setMenu == "profile"){
   			$("#profile").fadeIn(500);
   			$("#topmenu > li:nth-child(3)").addClass("active");
   		}else if(setMenu == "privacy"){
   			$("#privacy").fadeIn(500);
   			$("#topmenu > li:nth-child(4)").addClass("active");
   		}else if(setMenu == "notifications"){
   			$("#notifications").fadeIn(500);
   			$("#topmenu > li:nth-child(5)").addClass("active");
   		}else if(setMenu == "memberLeave"){
   			$("#memberLeave").fadeIn();
   			$("#topmenu > li:nth-child(6)").addClass("active");
   		}else{
   			$("#account").fadeIn(500);
   			$("#topmenu > li:nth-child(1)").addClass("active");
   		}
   		
   		// 탭 메뉴 클릭 이벤트
   		$("#topmenu > li > a").on("click", function(){
   			$("#mobile_menu").hide();
   			$(this).parent().parent().children("li").each(function(){
   				$(this).removeClass();
   			});
   			$(this).parent().addClass("active");
   			$(this).parent().parent().children("li").each(function(){
   				if($(this).hasClass("active")){
   					$($(this).children("a").attr("href")).fadeIn(500);
   				}else{
   					$($(this).children("a").attr("href")).hide();
   				}
   			});
   		});
   		
   		$("#profile-form").on("input", function(){
   			$("#profileBtn").removeAttr("disabled","disabled");
   		});
   		$(".notiCheck").on('ifChecked ifUnchecked', function(event){
   			$("#setting_notiBtn").removeAttr("disabled","disabled");
   		});
   		$("input:radio[name='profile_gender']").on('ifChecked ifUnchecked', function(event){
   			$("#profileBtn").removeAttr("disabled","disabled");
   		});
   		$("#privacy_follow, #privacy_profile").on('ifChecked ifUnchecked', function(event){
   			$("#privacyBtn").removeAttr("disabled","disabled");
   		});
   		
   		//account init
   		if("${userDto.country}" == "대한민국"){
   			$("#account_country option:eq(0)").attr("selected", "selected");
  		}else if("${userDto.country}" == "미국"){
  			$("#account_country option:eq(1)").attr("selected", "selected");
  		}else if("${userDto.country}" == "중국"){
  			$("#account_country option:eq(2)").attr("selected", "selected");
  		}else{
  			$("#account_country option:eq(3)").attr("selected", "selected");
  		}
   		
   		//profile init
   		if("${userDto.gender}" == "female"){
  			$("input:radio[name='profile_gender'][value='female']").attr("checked",true);
  		}else{
  			$("input:radio[name='profile_gender'][value='male']").attr("checked",true);
  		}
   		var ageinit1 = "${userDto.age}".substring(0,1);
   		if(ageinit1 != 0){
   			var ageinit2 = "${userDto.age}".substring(1,2);
   			if(ageinit1 == 1){
   	   			$("#profile_age1 option:eq(1)").attr("selected", "selected");
   	   		}else if(ageinit1 == 2){
   	   			$("#profile_age1 option:eq(2)").attr("selected", "selected");
   	   		}else if(ageinit1 == 3){
   	   			$("#profile_age1 option:eq(3)").attr("selected", "selected");
   	   		}else{
   	   			$("#profile_age1 option:eq(4)").attr("selected", "selected");
   	   		}
   			if(ageinit2 == 0){
   				$("#profile_age2 option:eq(0)").attr("selected", "selected");
   			}else if(ageinit2 == 1){
   				$("#profile_age2 option:eq(1)").attr("selected", "selected");
   			}else{
   				$("#profile_age2 option:eq(2)").attr("selected", "selected");
   			}
   		}
   		
   		//privacy init
   		if("${userDto.follow_accept}" == "2"){
  			$("input:radio[name='privacy_follow'][value='2']").attr("checked",true);
  		}else{
  			$("input:radio[name='privacy_follow'][value='0']").attr("checked",true);
  		}
   		if("${userDto.privacy}" == "2"){
  			$("input:radio[name='privacy_profile'][value='2']").attr("checked",true);
  		}else if ("${userDto.privacy}" == "1"){
  			$("input:radio[name='privacy_profile'][value='1']").attr("checked",true);
  		}else{
  			$("input:radio[name='privacy_profile'][value='0']").attr("checked",true);
  		}
   		
   		//notifications init
   		if("${userDto.noti_follow}" == 1) $("#noti_follow").attr("checked",true);
   		if("${userDto.noti_refer}" == 1) $("#noti_refer").attr("checked",true);
   		if("${userDto.noti_like}" == 1) $("#noti_like").attr("checked",true);
   		if("${userDto.noti_comment}" == 1) $("#noti_comment").attr("checked",true);
   		if("${userDto.noti_reply}" == 1) $("#noti_reply").attr("checked",true);
   		
   		$("#movie-upLoadProfileImage").draggable({
    		scroll: false,
    		axis : "y",
    		drag : function(event, ui){
    			var h = $("#movie-upLoadProfileImage").height();
    			if(ui.position.top >= 0){
    				ui.position.top = 0;
    			}else if(ui.position.top <= 180 - h){
    				ui.position.top = 180 - h;
    			}
    		},
    		stop : function(){
    			$("#profile_imageTop").val($("#movie-upLoadProfileImage").position().top);
    		}
    	});
		$("#noti_all").on('ifChecked ifUnchecked', function(event) {
			if(event.type == 'ifChecked'){
				$(".notiCheck").iCheck('uncheck');
			}
			$("#setting_notiBtn").removeAttr("disabled","disabled");
		});
   		$(".notiCheck").on("ifChecked", function(){
   			$("#noti_all").iCheck("uncheck");
   		});
   		$('[data-toggle="tooltip"]').tooltip({
            'placement': 'top',
            'container': 'body',
            'trigger': "hover"
        });
   		$("#leave-type").selectpicker();
   		$('input').iCheck('update');
   	}); // end document
   	
   	// 프로필탭 저장
   	function profileSave() {
   		$("#profile_description").val($("#profile_description").val().replace("\n", " "));
   		var age = $("#profile_age1").val();
   		if(age != 0){
   			var i = age.toString()+$("#profile_age2").val();
   			$("#profile_age").val(i);
   		}else{
   			$("#profile_age").val(0);
   		}
		$.getScript('/resources/js/jquery.form.js', function(){
    		$("#profile-form").ajaxSubmit({
    			statusCode: { 400: function() {
    					alertShow("danger", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장하기");
    					NProgress.done();
    				},
    				500: function() {
    					alertShow("danger", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장하기");
    					NProgress.done();
    				}
    			},
    			beforeSubmit: function() { 
    				$("#profileBtn").attr("disabled", "disabled").html("변경중...");
    				NProgress.start();
    			},
    			success: function(data) {
    				alertShow("success", "변경되었습니다", 2000);
		    		$("#profileBtn").attr("disabled", "disabled").html("저장하기");
		    		$("#movie-upLoadProfileImage").hide();
		    		NProgress.done();
    			}
    		});
		});
   	}
   	
   	// 페이스북 프로필 사진 가져오기
   	function getFbProfileImg(){
   		$("#movie-upLoadProfileImage").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#fb_profileImage").val("https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#profileBtn").removeAttr("disabled", "disabled");
   		$("#profile_image_viewer").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#profile_imageTop").val(0);
   	}
    </script>
  </body>
</html>